<template>
    <div class="warp">
      <a-modal
        :width="800"
        :title="title"
        :visible.sync="editModalVisible"
        @cancel="handleCancleDbSync"
      >
        <template slot="footer">
          <a-button @click="handleCancleDbSync">
            关闭
          </a-button>
          <a-button type="primary" :loading="syncLoading" @click="handleDbSync" >确定</a-button>
        </template>
        <div class="table-page-search-wrapper">
          <a-form-model layout="horizontal" ref="ruleForm" :model="formData" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-row :gutter="24">
              <a-col :xl="12" :lg="12" :md="12" :sm="24" >
                <a-form-model-item label="流程名称" prop="name">
                  <a-input v-model="formData.name" :disabled="formData.id?true:false" placeholder="请输入流程名称"/>
                </a-form-model-item>
              </a-col>
              <a-col :xl="12" :lg="12" :md="12" :sm="24">
                <a-form-model-item label="流程编码" prop="key">
                  <a-input v-model.trim="formData.key" :disabled="formData.id?true:false" placeholder="请输入流程编码"/>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :xl="12" :lg="12" :md="12" :sm="24">
                <a-form-model-item label="业务板块" prop="businessPlate">
                  <j-dict-select-tag v-model="formData.businessPlate"  placeholder="请选择业务板块" dict-code="business_sector"></j-dict-select-tag>
                </a-form-model-item>
              </a-col>
              <a-col :xl="12" :lg="12" :md="12" :sm="24" >
                <a-form-model-item label="表单类型" prop="formType">
                  <!-- <a-select v-model="formData.formType" placeholder="请选择表单类型">
                    <a-select-option value="0">自定义表单(设计器)</a-select-option>
                    <a-select-option value="1">Online表单</a-select-option>
                    <a-select-option :value="2">自定义开发</a-select-option>
                  </a-select> -->
                  <j-dict-select-tag
                    v-model="formData.formType"
                    placeholder="请选择表单类型"
                    dict-code="sys_form_type"
                  >
                  </j-dict-select-tag>
                </a-form-model-item>
              </a-col>
              <a-col :xl="12" :lg="12" :md="12" :sm="24" v-if="formData.formType === '1'">
                <a-form-model-item label="表名" prop="tableName">
                  <!-- <a-input v-model="formData.tableName"  placeholder="请输入表名"/> -->
                  <a-select v-model="formData.tableName" :filter-option="filterOption" :showSearch="true">
                    <a-select-option v-for="item in formList" :key="item.id">{{item.tableTxt}}</a-select-option>
                  </a-select>
                  <!-- <j-search-select-tag
                    placeholder="请做出你的选择"
                    v-model="formData.asyncSelectValue"
                    dict="onl_cgform_head,table_txt,id"
                    :async="true">
                  </j-search-select-tag> -->
                </a-form-model-item>
              </a-col>
              <a-col :xl="12" :lg="12" :md="12" :sm="24" v-if="formData.formType === '1'">
                <a-form-model-item label="流程状态列名" prop="flowStatusCol">
                  <a-input v-model="formData.flowStatusCol" :disabled="true" placeholder="请输入流程状态列名"/>
                </a-form-model-item>
              </a-col>
              <a-col :xl="12" :lg="12" :md="12" :sm="24">
                <a-form-model-item label="是否展示">
                  <a-checkbox v-model="formData.isShow"></a-checkbox>
                </a-form-model-item>
              </a-col>
              <a-col :xl="12" :lg="12" :md="12" :sm="24">
                <a-form-model-item label="流程图标">
                  <a-input v-model="formData.icon"  placeholder="请选择流程图标">
                    <a-icon slot="addonAfter" :tab-index="-1" class="anticon" type="setting" @click="handleProcessIcon" />
                  </a-input>
                </a-form-model-item>
              </a-col>
              <a-col :xl="12" :lg="12" :md="12" :sm="24">
                <a-form-model-item label="打印配置ID">
                  <a-input v-model="formData.reportCode"  placeholder="请选择打印配置ID" />
                </a-form-model-item>
              </a-col>
              <a-col :xl="12" :lg="12" :md="12" :sm="24">
                <a-form-model-item label="标题表达式">
                  <a-input v-model="formData.title"  placeholder="请输入标题表达式" />
                </a-form-model-item>
              </a-col>
              <a-col :xl="24" :lg="24" :md="24" :sm="24">
                <a-form-model-item label="简介表达式" :label-col="{span: 3}" :wrapper-col="{span: 21}">
                  <a-textarea v-model="formData.profiles"  placeholder="请输入简介表达式"/>
                </a-form-model-item>
              </a-col>
              <a-col :xl="24" :lg="24" :md="24" :sm="24">
                <a-form-model-item label="描述" :label-col="{span: 3}" :wrapper-col="{span: 21}">
                  <a-input v-model="formData.description"  placeholder="请输入描述"/>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </div>
      </a-modal>
      <icons refs="icons" :iconChooseVisible="iconChooseVisible" @choose="iconsChoose" @close="iconsClose"></icons>
    </div>
</template>
<script>
import { postAction } from '@/api/manage'
import { checkDuplicateKey } from '@/api/process'
import Icons from '@/views/system/modules/icon/Icons'
import { getAction } from '@/api/manage'
import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
export default {
  name: 'processModel',
  components: {
    Icons,
    JSearchSelectTag
  },
  data() {
    return {
      editModalVisible: false,
      title: '编辑',
      syncLoading: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      url: {
        edit: '/activiti/models/edit',
        add: '/activiti/models/save',
        formList: '/form/formConfiguration/list' // online在线表单路径
      },
      rules: {
        name: [
          { required: true, message: '请输入流程名称', trigger: 'change' }
        ],
        key: [
          { required: true, message: '请输入流程编码', trigger: 'blur' },
          { validator: (rule, value, callback) => this.validateDuplicateValue(value, this.formData.id, callback) },
          { validator: (rule, value, callback) => this.validateNumber(value, this.formData.id, callback) }
        ],
        businessPlate: [
          { required: true, message: '请选择业务板块', trigger: 'change' }
        ],
        tableName: [
          { required: true, message: '请输入表名', trigger: 'blur' }
        ],
        flowStatusCol: [
          { required: true, message: '请输入流程状态列名', trigger: 'blur' }
        ],
        formType: [
          { required: true, message: '请选择表单类型', trigger: 'blur' }
        ]
      },
      formData: {
        'name': '',
        'key': '',
        'businessPlate': '',
        'description': '',
        'processState': '',
        'version': '',
        'isShow': true,
        'icon': '',
        'tableName': '',
        'flowStatusCol': '',
        'formType': '0',
        'reportCode': ''
      },
      newFormData: {// 新增用数据
        'name': '',
        'key': '',
        'businessPlate': 0,
        'description': '',
        'processState': '',
        'version': '',
        'isShow': true,
        'icon': '',
        'tableName': '',
        'flowStatusCol': 'bpm_status',
        'formType': '0',
        'reportCode': ''
      },
      iconChooseVisible: false,
      formList: []
    }
  },
  methods: {
    validateDuplicateValue(value, id, callback) { // 重复编码校验
      checkDuplicateKey({
        modelId: id || null,
        key: value
      }).then(res => {
        res['success'] ? callback() : callback(res['message'])
      }).catch(err => {
        callback(err.message || err)
      })
    },
    validateNumber(value, id, callback) { // 不能为纯数字 不能有空格
      const rule = /(^\d*$)|(^\S+\s+\S+$)/
      if (rule.test(value)) {
        callback('不能为纯数字且不能有空格')
      } else {
        callback()
      }
    },
    handleCancleDbSync() { // 关闭
      this.editModalVisible = false
    },
    edit(record) {
      var that = this
      // const record_ = JSON.parse(JSON.stringify(record))
      // Object.keys(record_).forEach(function(key) {
      //   that.formData[key] = record_[key]
      // })
      that.formData = JSON.parse(JSON.stringify(record))
      this.editModalVisible = true
    },
    add() {
      // var that = this
      // const record_ = JSON.parse(JSON.stringify(that.newFormData))
      // Object.keys(that.formData).forEach(function(key) {
      //   that.formData[key] = record_[key]
      // })
      this.formData = { ...this.newFormData }
      this.editModalVisible = true
    },
    handleDbSync() { // 弹窗点击确定
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          this.updateData()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    close() {
      this.editModalVisible = false
    },
    updateData(params) { // 保存提交数据
      this.syncLoading = true
      if (this.formData.id) {
        postAction(this.url.edit, this.formData).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.editModalVisible = false
            this.$emit('ok')
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          setTimeout(() => {
            this.syncLoading = false
          }, 60)
        })
      } else {
        postAction(this.url.add, this.formData).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.editModalVisible = false
            this.$emit('ok')
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          setTimeout(() => {
            this.syncLoading = false
          }, 60)
        })
      }
    },
    handleProcessIcon() {
      this.iconChooseVisible = true
    },
    iconsChoose(choosedIcon) {
      this.iconChooseVisible = false
      this.formData.icon = choosedIcon
    },
    iconsClose() {
      this.iconChooseVisible = false
    },
    getOnlineFormList(parm) { // 请求主表数据
      getAction(this.url.formList, parm).then((res) => {
        if (res.success) {
          this.formList = res.result
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    }
  },
  mounted() {
    this.getOnlineFormList({
      tableTypes: '1,2'
    }, 'formList')
  }
}
</script>
<style lang="less">

</style>
